import React,{Component} from "react";
// import {HashRouter as Router, Route, Link} from 'react-router-dom';
import {BrowserRouter as Router, Route,NavLink,Link} from 'react-router-dom';


import "../css/home_Sections1.css";
import {connect} from "react-redux";
import $ from "jquery";

class Sections1 extends React.Component {
	componentDidMount() {
		var that = this;
		// http://localhost:8080/home_section1?page=1&count=5
	    $.get('http://localhost:8080/home_section1', function(res) {
	    	// console.log(JSON.parse(res).data.films);
	    	var data = JSON.parse(res).data.films;
	      	that.props.getSection1Data(data);
	    })
  	}
	render(){
		return(
			<div>
				<ul className="section">
					{
						this.props.getMainData1.map(function(item,index){
							return (
								<li key={index}>
									<Link to={"/detail/"+item.id}>
										<img src={item.cover.origin} alt="网络异常，请刷新后再试"/>
										<div className="jieshao">
											<div className="jieshao_left">
												<h3>{item.name}</h3>
												<p><span className="shop_num">{item.cinemaCount}</span>家影院上映<span className="person_num">{item.watchCount}</span>人购票</p>
											</div>
											<span className="score">{item.grade}</span>
										</div>
									</Link>
								</li>
							)
						})
					}
					
					
					<Link to="/film/now_playing" className="load_more">更多热映电影</Link>
				</ul>
				<p className="willPlay "><span>即将上映</span></p>
			</div>
		)
	}
}

var Section1 = connect(
	function(state,ownprops){
		return {
			getMainData1:state.getMainData1
		}
	},
	function(dispatch,ownprops){
		return {
			getSection1Data:function(aa){
				dispatch({
					type:"GETSECTION1",
					data:aa
				})
			}
		}
	}
)(Sections1);

export default Section1;